/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  FlatList,
} from 'react-native';
import Card from './src/components/Card';
import Grid from './src/components/Grid';
const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    getData();
  });

  const getData = () => {
    fetch('http://47.100.98.54:9020/api/goods')
      .then(r => r.json())
      .then(res => setData(res.data));
  };
  return (
    <>
      <SafeAreaView>
        {/* <View style={[styles.container, {backgroundColor: 'pink'}]} /> */}
        {/* <View style={styles.flex}>
          <View style={styles.sub}>
            <Text style={styles.txt}>1</Text>
          </View>
          <View style={styles.sub}>
            <Text style={styles.txt}>2</Text>
          </View>
          <View style={styles.sub}>
            <Text style={styles.txt}>3</Text>
          </View>
          <View style={styles.sub}>
            <Text style={styles.txt}>4</Text>
          </View>
          <View style={styles.sub}>
            <Text style={styles.txt}>5</Text>
          </View>
          <View style={styles.sub}>
            <Text style={styles.txt} numberOfLines={2} ellipsizeMode={'tail'}>
              微软雅黑微软雅黑微软雅黑微软雅黑微软雅黑微软雅黑微软雅黑微软雅黑微软雅黑
            </Text>
          </View>
        </View> */}
        {/* <View style={styles.scrollview}>
          <Card />
          <Card />
          <Card />
          <Card />
          <Card />
          <Card />
          <Card />
          <Card />
          <ScrollView
          // style={styles.scrollview}
          // contentContainerStyle={styles.scrollview}
          >
            <Grid />
            <Grid />
            <Grid />
            <Grid />
            <Grid />
            <Grid />
            <Grid />
            <Grid />
          </ScrollView>
        </View> */}
        <View style={styles.scrollview}>
          <FlatList
            keyExtractor={item => item.id}
            data={data}
            renderItem={item => {
              return <Card {...item.item} />;
            }}
          />
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    width: 200,
    height: 200,
    backgroundColor: 'red',
    margin: 20,
    marginLeft: 30,
    padding: 30,
    marginHorizontal: 50,
    marginVertical: 50,
    borderWidth: 2,
    borderColor: '#f0f',
    // borderStyle: 'dotted',
    borderStyle: 'dashed',
    shadowColor: 'red',
    elevation: 20,
    shadowOffset: {
      width: 10,
      height: 10,
    },
    shadowOpacity: 0.3,
    shadowRadius: 20,
    position: 'relative',
    left: 10,
    top: 100,
    opacity: 0.9,
    transform: [
      {scale: 0.5},
      {translateX: 150},
      {rotateZ: '30deg'},
      {skewX: '50deg'},
    ],
    // display: 'none',
  },
  flex: {
    backgroundColor: 'red',
    // justifyContent: 'center',
    justifyContent: 'space-around',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'red',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  sub: {
    width: 100,
    height: 100,
    backgroundColor: 'pink',
    overflow: 'hidden',
  },
  txt: {
    fontSize: 20,
    color: 'purple',
    fontStyle: 'italic',
    fontWeight: 'bold',
    // lineHeight: 100,
    textAlign: 'center',
    textDecorationLine: 'underline line-through',
    // fontFamily: '微软雅黑',
    letterSpacing: 30,
  },
  scrollview: {
    height: 500,
  },
});

export default App;
